<template>
  <div class="introduce_main">
    <div class="introduce_text">
      <h1><span>"硒"</span>概况</h1>
      <p>{{ customsListData }}</p>
    </div>
    <div class="introduce_show">
      <h1>文化活动</h1>
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item
          v-for="item in cusList"
          :key="item.id"
          @click="img_click(item)"
        >
          <el-image :src="item.imageUrl">
            <template #placeholder>
              <div class="image-slot">Loading<span class="dot">...</span></div>
            </template>
          </el-image>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="introduce_message">
      <h1>恩施土家族苗族自治州历史沿革</h1>
      <div class="message_main">
        <div class="main_name">
          <p>名字由来</p>
          <span
            >据清同治年《恩施县志·地理志》和《施南府志·地理志》等书记载，恩施上古时期为君国地，春秋为巴子国，战国属楚巫郡，秦属黔中郡，汉属南郡，三国属吴，晋属建平郡的沙渠县，后周为施州清江郡，隋义宁初为施州清江县，唐属江南道，宋、元属清江县。清朝前，其隶属名称迭易无常。</span
          >
          <span
            >恩施之称始源于施王屯（又名蛮王寨，现恩施市舞阳办事处红庙居委会瓦店子处），据《恩施县志》载：“东晋末，桓无子诞窜蛮中，自称施王，筑城临施水，号施王，子孙袭王至后周，保定初年始平之，以其他地置施州，乃施王屯余地。”此事距今已有一千四百多年历史。到了元朝，建立了土司制度，在今宣恩县城关驻有一大土司，恩施市亦归所辖。因土司居于施王屯的南面，故得名“施南土司”。从此，历史上就有了“施南”之称。</span
          >
          <span
            >据同治《恩施县志》：“明设施州卫，雍正六年称施县，雍正七年改称恩施……”恩施之意，即雍正皇帝恩赐于施县之名，故名恩施。</span
          >
          <span
            >从元至清出四百余年皆系土司制。雍正十三年“改土归流”，设置施南府。民国初废府存县，民国四年设荆南道，十五年改为施鹤道，十六年设鄂西行政区。1949年11月6日恩施解放后，建立了人民政府，沿用“恩施”之名至今。</span
          >
        </div>
        <div class="message_history">
          <p>历史沿革</p>
          <span
            >春秋为巴子国地；战国为楚地；秦属黔中郡；汉属南郡、武陵郡；三国先属蜀，后属吴建平郡、武陵郡；两晋与南北朝宋、齐、梁、北周属建平郡、天门郡、武陵郡、信陵郡、秭归郡、业州军屯郡、清江郡；隋属巴东郡巴东县，清江郡清江县、开夷县、建始县；唐属归州巴东县，施州清江县、建始县；五代先后为前、后蜀所据；宋属归州巴东县，施州清江县、建始县及辰州、富州、高州、定州等许多小羁糜州；元属归州巴东县、施州建始县，南部少数民族地区实行土司制度，先后置散毛土司、唐崖土司、金峒土司、龙潭土司、忠建土司、毛岭土司、施南土司等土司；元末明玉珍据蜀时本区为其所控制；明属夔州建始县、归州巴东县、施州卫军民指挥使司，南部地区仍实行土司制度，设有容美宣慰司，施南、散毛、忠建3个宣抚司，9个安抚司，13个长官司，5个蛮夷长官司。</span
          >
          <span
            >清初沿用明制，雍正六年（1728年）裁施州卫，设恩施县，辖区未变，雍正十三年改土归流，置施南府，辖恩施县、宣恩县、来凤县、咸丰县、利川县，乾隆元年（1736年），夔州建始县划归施州，巴东县、鹤峰州属宜昌府。</span
          >
          <span
            >中华民国元年（1912年）废府设道存县，民国四年设荆南道，治所恩施县，辖恩施、建始、宣恩、来凤、咸丰、利川6县，民国十五年改荆南道为施鹤道，鹤峰州改县划入施鹤道，民国十七年改设鄂西行政区，民国二十一年改为第十行政督察区，巴东县划入，州域始为8县之治。民国二十五年改为第七行政督察区，辖区未变。</span
          >
        </div>
      </div>
    </div>
    <el-drawer width="1000px" v-model="itemMessageStatu" :with-header="false">
      <ItemMessage @close="closeItemMessageStatu" :message="itemMessage" />
    </el-drawer>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import { description, customsList, viewList } from "@/utils/fetch/api";
import { ElCarousel, ElDialog, ElImage } from "element-plus";
import ItemMessage from "./dialog/itemMessage.vue";
import { useStore } from "@/store/index";
export default defineComponent({
  components: {
    ElCarousel,
    ElDialog,
    ItemMessage,
    ElImage
  },
  setup() {
    const params = {
      pageNum: 1,
    };

    const store = useStore();

    const customsListData = ref();
    const cusList = ref();

    const refreshdescription = async () => {
      const data = await description();
      const datas = await customsList(params);

      customsListData.value = data.data;
      cusList.value = datas.data.data;
      console.log("cusList.value: ", cusList.value);

      store.state.isLoading = false;
    };

    const itemMessage = ref<any>();
    const itemMessageStatu = ref(false);
    const closeItemMessageStatu = () => {
      itemMessageStatu.value = false;
    };
    const img_click = (item: any) => {
      itemMessageStatu.value = true; //模拟
      cusList.value.forEach((items: any) => {
        if (items.id == item.id) {
          itemMessage.value = items;
          itemMessageStatu.value = true;
        }
      });
    };

    onMounted(() => refreshdescription());
    return {
      customsListData,
      img_click,
      itemMessageStatu,
      itemMessage,
      closeItemMessageStatu,
      cusList,
    };
  },
});
</script>

<style lang="less" scoped>
.introduce_main {
  .introduce_text {
    display: flex;
    height: 20em;
    background: white;
    flex-direction: column;
    align-items: center;
    h1 {
      font-size: 3em;
      span {
        font-size: 1.5em;
        color: #ffcc33;
      }
    }
    p {
      text-indent: 2em;
      width: 80%;
    }
  }

  .introduce_show {
    box-sizing: border-box;
    background: #ffcc33;
    height: 30em;
    overflow: hidden;
    position: relative;
    h1 {
      position: absolute;
      color: white;
      font-size: 3em;
      text-align: left;
      left: 1em;
      transform: rotate(350deg);
      border-top: 3px solid white;
      border-bottom: 3px solid white;
    }
    .el-carousel {
      height: 20em;
      margin: 6em 10em auto 10em;
      .el-carousel__item--card {
        height: 18em;
      }
    }
  }

  .introduce_message {
    height: 40em;
    background: white;
    h1 {
      font-size: 3em;
      margin: 0;
      color: #6e6e6e;
    }
    .message_main {
      display: flex;
      width: 100%;
      justify-content: space-around;
      text-align: left;
      color: black;
      p {
        font-size: 2em;
      }
      .main_name {
        width: 30em;
        font-weight: bold;
        span {
          color: #bdb7b7;
          display: inline-block;
          text-indent: 2em;
        }
      }
      .message_history {
        width: 30em;
        font-weight: bold;
        span {
          color: #bdb7b7;
          display: inline-block;
          text-indent: 2em;
        }
      }
    }
  }

  /deep/.el-dialog__body {
    min-height: 20em;
  }

  /deep/.carousel__arrow {
    top: 75%;
  }
}

/deep/.image-slot{
  width: 100%;
  height: 100%;
  background: white;
}
</style>
